var header = `
<div class='com-hea-wrap'>
   <div class='com-hea-top'>
        <div>1</div>
        <div class='com-top-con dis-spa'>
            <div class='dis-spa com-top-liulan'>
                <div class='dis-spa'>
                    <div class='icon-trans' @mouseenter='enter("hover-white-1")' @mouseleave='leave("hover-white-1")'>
                        <div id='hover-white-1'></div>
                        <img class='hover' src='./img/btc.png' width='20px' height='20px' />
                    </div>
                    <div class='icon-trans' @mouseenter='enter("hover-white-2")' @mouseleave='leave("hover-white-2")'>
                        <div id='hover-white-2'></div>
                        <img class='hover' src='./img/yi.png' width='20px' height='20px' />
                    </div>
                </div>
                <img src='./img/hea-bg.png' height='42px' />
            </div>
            <div class='dis-spa com-top-contact'>
                <div class='dis-spa'>
                    <img src='./img/weixin.svg' width='20px' height='20px'/>
                    <span>17353262583 17365294814</span>
                </div>
                <div class='dis-spa'>
                    <img src='./img/icon-oil.svg' width='20px' height='20px'/>
                    <span>023-63410620</span>
                </div>
                <div class='dis-spa'>
                    <img src='./img/icon-phone.svg' width='20px' height='20px'/>
                    <span>023-63410620</span>
                </div>
            </div>
        </div>
        <div>2</div>
   </div>
   <div class='com-hea-bottom'>
        <div class='center-con dis-spa'>
            <img class='hover' src="./img/logo.png" height="40px">
            <div class='com-bom dis-spa'>
                <span @click='window.location.href="index.html"' :class="{'hea-active':active==1,'hover':true}">首页</span>
                <span @click='window.location.href="about-us.html"' :class="{'hea-active':active==2,'hover':true}">关于我们</span>
                <span @click='window.location.href="solution-nfc.html"'  :class="{'hea-active':active==3,'hover':true}">行业解决方案</span>
                <span @click='window.location.href="case.html"' :class="{'hea-active':active==4,'hover':true}">合作案例</span>
                <span @click='window.location.href="news.html"' :class="{'hea-active':active==5,'hover':true}">新闻中心</span>
                <span @click='window.location.href="find-we.html"' :class="{'hea-active':active==6,'hover':true}">联系我们</span>
            </div>
        </div>
   </div>
</div>
`;
Vue.component('hea', {
    data: function() {
        return {

        }
    },
    props: {
        active: {
            // 1:首页  2：关于我们  3：行业解决方案  4：合作案例  5:新闻中心  6:联系我们
            default: '1'
        }
    },
    mounted: function() {
        // setTimeout(function() {
        // var link = document.createElement("link");
        // link.rel = "stylesheet";
        // link.type = "text/css";
        // link.href = './css/component/hea.css';
        // document.getElementsByTagName("head")[0].appendChild(link);
        // }, 200);
    },
    template: header,
    methods: {
        //浏览器hover动画
        enter: function(el) {
            var el = $('#' + el);
            el.show();
            setTimeout(function() {
                el.css({
                    'transform': 'rotateZ(45deg)',
                });
            }, 50);
        },
        //离开
        leave: function(el) {
            var el = $('#' + el);
            el.css('transform', 'rotateZ(0deg)');
            setTimeout(function() {
                el.hide();
            }, 500);
        }
    }
});